﻿<!DOCTYPE html>
<html>
<head>
<title>个人管理中心</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="css/homeStyle.css">
<link rel="stylesheet" type="text/css" href="css/detail.css">
<link rel="stylesheet" href="css/jquery-labelauty.css">
<script type="text/javascript" src="js/homePage.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/cookie_util.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/jquery-labelauty.js"></script>
<script type="text/javascript" src="js/load.js"></script>
<script type="text/javascript" src="js/house.js"></script>


<script type="text/javascript">
    var userId = getCookie("userId");
    var userType = getCookie("userType");
    var userName = getCookie("userName");
    if(isNull(userId)||"00"==userType){
        window.location.href="logIndex.html";
    }
    $(function() {
        $("#logid").html(userName);
        $("#modifyUserId").val(userId);
        $(':input').labelauty();
        defaultPage();//显示首页
        modifyUserInfo();//修改用户信息
        modifyUserPwd();//修改用户密码
    });
    //首页显示方法
    function defaultPage(){
        userId = getCookie("userId");
        if(isNull(userId)){
            alert("登录状态已失效,请重新登录");
            window.location.href="logIndex.html";
        }
       showDiv(".canShow","#houseUseDiv");
       $("#acctInfoDiv").show();
       getUserHouseInfo();//显示首页信息
    }
    
    //获取用户的房间信息
    function getUserHouseInfo(){
        userId = getCookie("userId");
        if(isNull(userId)){
            alert("登录状态已失效,请重新登录");
            window.location.href="logIndex.html";
        }
        $.ajax({
            url:"/HouseRent/house/getUserInfo.do",
            type:"post",
            data:{"userId":userId},
            dataType:"json",
            success:function(result){
                console.log("查询房客的房间信息:"+result.detail);
                if("0000"==result.status){
                    //使用信息
                    var useInfo = result.data.useInfo;
                    $("#guarantyFee").text(useInfo.guarantyFee);
                    $("#houseUseEndDate").text(useInfo.endDate);
                    $("#houseDetail").data("houseId",useInfo.houseId);
                    $("#fangdong").val(useInfo.hostId);
                    //消息信息
                    var noReadMsgCount = 0;
                    var msgInfo = result.data.msgInfo;
                    if (!isNull(msgInfo)) {
                        $("#noticeInfo").html("");
                        $("#repairInfo").html("");
                        var hasNotice = false;
                        var hasRepair = false;
                        for ( var i = 0; i < msgInfo.length; i++) {
                            var msg = msgInfo[i];
                            if("0" == msg.msg_type){
                                if ("0" == msg.read_tag) {// 未读消息
                                    noReadMsgCount+=1;
                                }
                            }else {
                                var td = '<tr><td><span>●</span></td><td><a href="javascript:void(0)" onclick="showmsg(this)">'
                                        + msg.msg_tatile + '</a></td></tr>';
                                $td = $(td);
                                $td.data("msgContent", msg.msg_content);
                                $td.data("readTag", msg.read_tag);
                                $td.data("msgId", msg.msg_id);
                                if ("1" == msg.msg_type) {
                                    $("#noticeInfo").append($td);
                                    hasNotice = true;
                                }
                                else if ("2" == msg.msg_type) {
                                    $("#repairInfo").append($td);
                                    hasRepair=true;
                                }
                            }
                        }
                        if(!hasNotice){
                            $("#noticeInfo").html("暂无公告");
                        }
                        if(!hasRepair){
                            $("#repairInfo").html("暂无报修");
                        }
                        $("#noReadMsgCount").text(noReadMsgCount);
                    }
                    //账单信息
                    var acctInfo = result.data.acctInfo;
                    if(!isNull(acctInfo)){
                        $("#orderlist").html("");
                        for(var i=0;i<acctInfo.length;i++){
                            var acct = acctInfo[i];
                            var tr = '<tr><td>'+acct.house_number+'</td><td>'+acct.real_name+'</td>'+
                                     '<td>'+acct.link_phone+'</td><td>'+acct.end_date+'</td>'+
                                     '<td>'+deCodePayTag(acct.pay_tag)+'</td>';
                            if("0"==acct.pay_tag){
                                tr+='<td><input type="button" class="titlebut" onclick="optAcct(this)" value="交租" /></td></tr>';
                            }else{
                                tr+='<td><input type="button" class="titlebut" onclick="userAcct()" value="查看" /></td></tr>';
                            }
                            var $tr = $(tr);
                            $tr.data("acctId",acct.acct_id);
                            $("#orderlist").append($tr);
                        }
                    }
                }else{
                    alert(result.detail);
                }
            },
            error:function(){
                alert("获取用户信息失败,请稍后重试");
            }
        });
    }
    //显示房间详细信息
    function houseDetail(){
        getRoomDetail();//直接获取到账单信息和房间信息
        showDiv(".canShow","#houseDetialDiv");
    }
    
    //获取房间详情
    function getRoomDetail(){
        userId = getCookie("userId");
        if(isNull(userId)){
            alert("登录状态已失效,请重新登录");
            window.location.href="logIndex.html";
        }
        var houseId = $("#houseDetail").data("houseId");
        /*addCookie("houseId",houseId,2);
        addCookie("houseUser",userId,2);
        window.location.href="roomDetail.html";*/
        //查询房间的历史账单
        $.ajax({
            url:"/HouseRent/acct/getAcctInfoByHouseUser.do",
            type:"post",
            data:{"houseId":houseId,"userId":userId},
            dataType:"json",
            success:function(result){
                console.log(result.detail);
                console.log(result.data.houseInfo);
                if("0000"==result.status){
                    //房间详情
                    var house = result.data.houseInfo;
                    if(!isNull(house)){
                        $("#show-img").html('<img src="'+house.house_pic+'" id="largerimg" width="400" height="400"/>');
                        $("#roomId").html(house.house_number);
                        var roomType = house.house_type.split("-");
                        $("#roomType").html(roomType[0]+"室"+roomType[1]+"厅"+roomType[2]+"厨"+roomType[3]+"卫");
                        $("#roomAddress").html(house.house_address+" "+house.detail_address);
                        //$("#openDate").val();
                        $("#custName").html(house.real_name);
                        $("#custTel").html(house.link_phone);
                        var email = "";
                        if(!isNull(house.e_mail)){
                            email += house.e_mail+" ";
                        }else if(!isNull(house.qq)){
                            email += house.qq;
                        }
                        $("#custqq").html(email);
                        $("#roomGoods").html(house.house_goods);
                        //房间的费用信息
                        $("#guarantyFees").text(house.guaranty_fee+"元");
                        $("#houseRent").text(house.house_rent+"元/月");
                        $("#waterCharge").text(house.water_charge+"元/月");
                        $("#powerCharge").text(house.power_charge+"元/月");
                        //$("#roomnotice").val();
                        if("0"==house.can_use_tag){//使用中
                            $("#cancelroom").val("退订");
                        }else{
                            $("#cancelroom").val("入住");
                        }
                        $("#cancelroom").data("houseId",house.house_id);
                    }else{
                        alert("未获取到房间的详细信息!请重试");
                    }
                    //账单详情
                    var accts = result.data.acctInfo;
                    if(!isNull(accts)){//账单信息
                        $("#acctList").html("");
                        for(var i=0;i<accts.length;i++){
                            var acct = accts[i];
                            var fee_detail = "房租:"+acct.house_rent+"元(含:"+acct.charge_reason+"),水费:"+acct.water_charge+"元,电费:"+acct.power_charge+"元";
                            var tr = '<tr><td>'+acct.acct_id+'</td><td>'+acct.tote_fee+'</td>'+
                                    '<td>'+acct.start_date+" 至 "+acct.end_date+'</td>'+
                                    '<td>'+deCodeAcctPayTag(acct.pay_tag)+'</td><td>'+fee_detail+'</td>';
                            if("0"==acct.pay_tag){
                                tr+='<td><input type="button" class="titlebut" onclick="optAcct(this)" value="交租" /></td></tr>';
                            }else{
                                tr+='<td>暂无</td></tr>';
                            }
                            var $tr = $(tr);
                            $tr.data("acctId",acct.acct_id);
                            $("#acctList").append($tr);
                        }
                    }else{
                        $("#acctList").html("暂无账单");
                    }
                }
            },
            error:function(){
                alert("系统异常,请稍后重试");
            }
        });
    }
    
    //退订
    function checkInOrUnsubscribe(input){
        var houseId = $(input).data("houseId");
        var optType = $(input).val();
        if(isNull(houseId)){
            alert("获取订单信息异常");
            return;
        }
        if("退订"==optType){//退订
            $.ajax({
                url:"/HouseRent/order/endOrder.do",
                type:"post",
                data:{"houseId":houseId},
                dataType:"json",
                success:function(result){
                    alert(result.detail);
                    if("0000"==result.status){
                        logOut();
                        //window.location.href="logIndex.html";
                    }
                }
            });
        }
    }
    //用户账单
    function userAcct(){
        getRoomDetail();//直接获取到账单信息和房间信息
        showDiv(".canShow","#allAcctInfoDiv");
    }
    //房间使用人信息
    function houseUserInfo(){
        userId = getCookie("userId");
        if(isNull(userId)){
            alert("登录状态已失效,请重新登录");
            window.location.href="logIndex.html";
        }
        showDiv(".canShow","#modifyInfoDiv");
    }
    //修改个人密码
    function modifyUserPassword(){
        userId = getCookie("userId");
        if(isNull(userId)){
            alert("登录状态已失效,请重新登录");
            window.location.href="logIndex.html";
        }
        // 初始化密码框的内容
        $("#oldPwd").val("");
        $("#newPwd").val("");
        $("#truePwd").val("");
        showDiv(".canShow","#modifyUserPasswordDiv");
    }
    //显示用户的所有消息
    function showUserAllMsg(){
        userId = getCookie("userId");
        if(isNull(userId)){
            window.location.href="logIndex.html";
        }
        getAllMassageInfo(userId);//获取所有的消息
        showDiv(".canShow","#allMsgDiv");
    }
    //用户发送信息的方法
    function userSendMsg(){
        userId = getCookie("userId");
        if(isNull(userId)){
            alert("登录状态已失效,请重新登录");
            window.location.href="logIndex.html";
        }
        editor1.setData("");
        showDiv(".canShow","#sendMsgDiv");
    }
    //用户报修的方法
    function userbaoxiu(){
        userId = getCookie("userId");
        if(isNull(userId)){
            alert("登录状态已失效,请重新登录");
            window.location.href="logIndex.html";
        }
        $("#Text1").val("");
        editor2.setData("");
        $("#baoxiuType").val("物品报修:");
        $("#Text2").val("");
        showDiv(".canShow","#baoxiudeDiv");
    }
    
    //报修
    function baoxiuFuncton(){
        userId = getCookie("userId");
        if(isNull(userId)){
            alert("登录状态已失效,请重新登录");
            window.location.href="logIndex.html";
        }
    }
    /*function showmsg() {
        var s = document.getElementById("shade");
        s.style.display = "block";
        var l = document.getElementById("msgnr");
        l.style.display = "block";
    }

    function close_nr() {
        var s = document.getElementById("shade");
        s.style.display = "none";

        var l = document.getElementById("msgnr");
        l.style.display = "none";
    }
    function allmsg() {
        $(".allmsg").attr("id", "active1");
        $(".noreadmsg").attr("id", "");
        $(".readmsg").attr("id", "");
    }
    function noreadmsg() {
        $(".allmsg").attr("id", "");
        $(".noreadmsg").attr("id", "active1");
        $(".readmsg").attr("id", "");
    }
    function readmsg() {
        $(".allmsg").attr("id", "");
        $(".noreadmsg").attr("id", "");
        $(".readmsg").attr("id", "active1");
    }*/
</script>
</head>

<body style="margin:0px;">
	<div id="shade"></div>
	<!-- 左侧栏 -->
	<div class="leftpart">
		<div class="lipart">
			<ul id="ullist">
				<li class="lilist">
					<h3>个人中心</h3>
					<ul>
						<li><a href="Javascript:void(0)" class="zilist" onclick="defaultPage()">首页</a>
						</li>
						<li><a id="houseDetail" href="Javascript:void(0)" class="zilist" onclick="houseDetail()">房间信息</a>
						</li>
						<li><a href="Javascript:void(0)" class="zilist" onclick="userAcct()" id="allfee">我的账单</a></li>
						<li><a href="Javascript:void(0)" class="zilist" onclick="houseUserInfo()">个人信息</a>
						</li>
						<li><a href="Javascript:void(0)" class="zilist" onclick="modifyUserPassword()">修改密码</a>
						</li>
					</ul></li>
				<li class="lilist">
					<h3>通知中心</h3>
					<ul>
						<li><a href="Javascript:void(0)" class="zilist" onclick="showUserAllMsg()">全部消息</a>
						</li>
						<li><a href="Javascript:void(0)" class="zilist" onclick="userSendMsg()">发送消息</a>
						</li>
						<li><a href="Javascript:void(0)" class="zilist" onclick="userbaoxiu()">报修报失</a>
						</li>
					</ul></li>
			</ul>
		</div>
	</div>
	<!-- 右侧栏 -->
	<div class="rightpart">
		<div class="topnav">
			<span id="fwczgl">个人管理中心</span>
			<div id="navright">
				<span><img src="icon/mes.png" /> </span> <span><a href="Javascript:showUserAllMsg()">消息</a>
				</span> <span>|</span> <span><img src="icon/logper.png" /> </span> <span
					id="logid">测试人员</span> <span>|</span> <span><a onclick="logOut()" href="Javascript:void(0)">退出登录</a>
				</span>
			</div>
		</div>
		<div class="survey canShow" id="houseUseDiv">
			<div class="servertitle">
				<h3>我的房屋概况</h3>
			</div>
			<div class="serveytable">
				<table>
					<tr>
						<td><p id="noReadMsgCount">0</p> <span>未读消息</span>
						</td>
						<td><p id="guarantyFee">0</p> <span>押金</span>
						</td>
						<td><p id="houseUseEndDate">2017-01-01</p> <span>到期时间</span>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div class="mainshow canShow" id="acctInfoDiv">
			<div class="orderlist">
				<table>
					<thead>
						<tr>
							<td>房间</td>
							<td>房东姓名</td>
							<td>联系方式</td>
							<td>账单日期</td>
							<td>状态</td>
							<td>操作</td>
						</tr>
					</thead>
					<tbody id="orderlist">
						<tr>
							<td></td>
							<td></td>
							<td>暂无账单</td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<!-- <tr>
							<td>504</td>
							<td>租aa名</td>
							<td>15956421258</td>
							<td>2050-12-32</td>
							<td>状态</td>
							<td>操作</td>
						</tr> -->
					</tbody>
				</table>
			</div>
			<div class="rightnav">
				<div class="notice">
					<p>公告</p>
					<table id="noticeInfo">
						<tr>
							<td><span>●</span>
							</td>
							<td>暂无公告
							</td>
						</tr>
					</table>
				</div>
				<div class="repair">
					<p>我的报修</p>
					<table id="repairInfo">
						 <tr>
							<td><span>●</span>
							</td>
							<td>暂无报修
							</td>
						</tr>
						<!--<tr>
							<td><span>●</span>
							</td>
							<td><a href="">503房子塌了</a>
							</td>
						</tr> -->
					</table>
				</div>
			</div>
		</div>
		<!--房间信息-->
		<div class="content-detail canShow" id="houseDetialDiv">
				<div class="detail-img">
					<div id="show-img">
						<!-- <img src="img/background.png" id="largerimg" width="400" height="400"/> --> 
					</div>
				</div>
				<div class="detail-list">
					<div id="show-list">
					<!-- <h3 id="safetitle">大奖赛卡拉胶抵抗力撒娇了靠的就是卡了</h3><br/> -->
					<span class="spandetail">房间号：</span><span class="spanvalue" id="roomId"></span>
					<span class="spandetail">房间类型：</span><span class="spanvalue" id="roomType"></span><br/>
					<span class="spandetail">房间地址：</span><span class="spanvalue" id="roomAddress"></span><br/>
					<!-- <span class="spandetail">入住时间：</span><span class="spanvalue" id="openDate">2015-12-12</span> -->
					<span class="spandetail">入住人：</span><span class="spanvalue" id="custName"></span><br/>
					<span class="spandetail">联系方式：</span><span class="spanvalue" id="custTel"></span>
					<span class="spandetail">QQ/邮箱：</span><span class="spanvalue" id="custqq"></span><br/>
					<span class="spandetail">房间物品：</span><span class="spanvalue" id="roomGoods"></span><br/>
                    <span class="spandetail">入住所需押金：</span><span class="spanvalue" id="guarantyFees"></span><br/>
                    <span class="spandetail">房租：</span><span class="spanvalue" id="houseRent"></span><br/>
                    <span class="spandetail">水费：</span><span class="spanvalue" id="waterCharge"></span><br/>
                    <span class="spandetail">电费：</span><span class="spanvalue" id="powerCharge"></span><br/>
					<!-- <span class="spandetail">说明：</span><span class="spanvalue" id="roomnotice">阿斯顿法国和健康</span><br/> -->
					<input type="button" id="cancelroom" onclick="checkInOrUnsubscribe(this)" value="退订"/>
					</div>
				</div>
			</div>
		
		<!--全部账单-->
		<div class="qryAllFee canShow" id="allAcctInfoDiv">
			<div class="allfeetitle">
				<span>查看所有账单</span>
			</div>
			<div class="feelisttable">
				<table>
					<thead>
						<tr>
							<td>账单号</td>
                            <td>账单金额</td>
                            <td>账单日期</td>
                            <td>账单状态</td>
                            <td>明细</td>
                            <td>操作</td>
						</tr>
					</thead>
					<tbody id="acctList"></tbody>
				</table>
			</div>
		</div>
		<!--全部消息-->
		<div class="qryAllMsg canShow" id="allMsgDiv">
			<div class="msgbody">
				<div>
					<div>
						<div id="msgnav">
							<ul>
								<li id="active1" class="allmsg"><a
									href="javascript:allmsg()">全部消息</a>
								</li>
								<li id="" class="noreadmsg"><a
									href="javascript:noreadmsg()">未读消息</a>
								</li>
								<li id="" class="readmsg"><a href="javascript:readmsg()">已读消息</a>
								</li>
							</ul>
						</div>
						<div id="line"></div>
						<div id="msglist">
							<ul id="allMsgId" class="msgCanShowDiv">
                                <li>暂无消息</li>
                                <!-- <li><img src="img/arcicon.gif" /> <a
                                    href="javascript:showmsg()" id="msgtitle">一条新消息</a> <span>2017-04-30</span>
                                </li> -->
                            </ul>
                            <ul id="noReadMsgId" class="msgCanShowDiv">
                                <li>暂无消息</li>
                            </ul>
                            <ul id="readMsgId" class="msgCanShowDiv">
                                <li>暂无消息</li>
                            </ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--发送消息-->
		<div class="sendMsg canShow" id="sendMsgDiv">
			<div class="sendtitle"></div>
			<div>
				<div id="alluse">
					<ul class="dowebok">
						<li><input id="fangdong" type="checkbox" name="houseUser"
							data-labelauty="房东">
						</li>
					</ul>
				</div>
				<!-- <div id="simpleuse">
					<ul class="dowebok">
						<li><input type="checkbox" name="checkbox"
							data-labelauty="HTML">
						</li>
						<li><input type="checkbox" name="checkbox"
							data-labelauty="CSS">
						</li>
						<li><input type="checkbox" name="checkbox"
							data-labelauty="JavaScript">
						</li>
						<li><input type="checkbox" name="checkbox"
							data-labelauty="SEO">
						</li>
						<li><input type="checkbox" name="checkbox"
							data-labelauty="PHP">
						</li>
						<li><input type="checkbox" name="checkbox"
							data-labelauty="JAVA">
						</li>
						<li><input type="checkbox" name="checkbox"
							data-labelauty=".NET">
						</li>
					</ul>
				</div> -->
				<div id="editorbody">
				<textarea name="editor1" id="editor1" rows="10" cols="80">
                    </textarea>
				<script type="text/javascript">
					editor1 = CKEDITOR.replace('editor1');
				</script>
				<input onclick="sendMsgToAll()" id="sendMsgBut" type="button" value="确认发信" />
				</div>
			</div>
		</div>
		<!--报修报失-->
		<div class="myrepair canShow" id="baoxiudeDiv">
			<div class="noticetitle">
				<span>标题</span><input id="Text1" class="inputStyle" type="text" />
				<select id="baoxiuType">
					<option value="物品报修:">物品报修</option>
					<option value="物品报失:">物品报失</option>
				</select>
				<span>联系方式</span><input id="Text2" class="inputStyle" type="text" />
			</div>
			<div class="noticenr">
				<textarea name="editor2" id="editor2" rows="10" cols="80">
                    </textarea>
				<script type="text/javascript">
					editor2 = CKEDITOR.replace('editor2');
				</script>
				<input onclick="sendMsgButFunction()" id="sendMsgBut" type="button" value="确认发布" />
			</div>
		</div>
		<!-- 个人信息 -->
		<div class="modifyInfo canShow" id="modifyInfoDiv">
			<div class="infotitle">
				<span>个人信息</span>
			</div>
			<div class="infoform">
				<label>用户名</label> <input id="modifyUserId" type="text" class="inputStyle" name="" title="" disabled= "true"/> <br/>
                <label>联系方式</label> <input id="modifyLink" type="text" class="inputStyle" name="" title="" /> <br/>
                <label>真实姓名</label> <input id="modifyRealName" type="text" class="inputStyle" name="" title="" /><br/> 
                <label>性别</label>
				<select id="modifySex">
                    <option value="00">保密</option>
                    <option value="01">男</option>
                    <option value="02">女</option>
				</select><br/>
				<label>证件号码</label> <input id="modifyCertNum"
					type="text" class="inputStyle" name="" title="" /><br/> <label>邮箱</label>
				<input id="modifyEmail" type="text" class="inputStyle" name="" title="" /><br/> <label>QQ</label>
				<input id="modifyqq" type="text" class="inputStyle" name="" title="" /><br/> <label></label><input
				   id="modifyInfo" type="button" class="modifyper" name="" title="" value="确定/修改" />
			</div>
		</div>
		<div class="modifyPwd canShow" id="modifyUserPasswordDiv">
			<div class="pwdtitle">
				<span>修改密码</span>
			</div>
			<div class="pwdform">
				<label>原始密码</label> <input id="oldPwd" type="text" class="inputStyle" name=""
					title="" /> <br/><label>新密码</label> <input id="newPwd" type="text"
					class="inputStyle" name="" title="" /> <br/><label>确认密码</label> <input
					id="truePwd" type="text" class="inputStyle" name="" title="" /><br/>
					<label></label><input id="modifypwd" type="button" class="modifyper" name="" title="" value="确定/修改" />
			</div>
		</div>
	</div>
	<div id="msgnr">
		<div>
			<a href="javascript:close_nr()"><img src="icon/close.png">
			</a>
		</div>
		<p>内容</p>
        <p id="msgContent"></p>
	</div>
	<div style="text-align:center;clear:both;">
		<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
		<script src="/follow.js" type="text/javascript"></script>
	</div>
</body>
</html>
